<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('锜风公寓-分类房间列表')" />
    <style>
        .panel { margin-bottom: 0; border-radius: 0; }
        .panel-heading { border-radius: 0; text-align: center; }
        .table { border-radius: 0; }
        .table th, .table td { text-align: center; vertical-align: middle !important; }
        .col-sm-3 { padding-right: 5px; padding-left: 5px; }
        .panel, .table { border: 1px solid #ddd; }
        .table td { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* 预定房间背景色（浅红色） */
        .reserved-row { background-color: #fff0f0 !important; }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <!-- 1. 单间 -->
        <div class="col-sm-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">单间</h3>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>单元号</th>
                        <th>房间号</th>
                        <th>租金/月</th>
                        <th>房屋状况</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="room : ${categoryData.singleRoom}"
                        th:class="${room.status == '5' ? 'reserved-row' : ''}">
                        <td th:text="${room.unit}"></td>
                        <td th:text="${room.roomNum}"></td>
                        <td th:text="${room.rent}"></td>
                        <!-- 预定无备注显示“预定”，其他无备注则空着 -->
                        <td th:text="@{
                                    ${room.status == '5' ?
                                        (room.remark ?: '预定') :
                                        room.remark
                                    }
                                }"></td>
                    </tr>
                    <tr th:if="${categoryData.singleRoom.size() == 0}">
                        <td colspan="4" class="text-center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 2. 一房一厅 -->
        <div class="col-sm-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">一房一厅</h3>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>单元号</th>
                        <th>房间号</th>
                        <th>租金/月</th>
                        <th>房屋状况</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="room : ${categoryData.oneBedroom}"
                        th:class="${room.status == '5' ? 'reserved-row' : ''}">
                        <td th:text="${room.unit}"></td>
                        <td th:text="${room.roomNum}"></td>
                        <td th:text="${room.rent}"></td>
                        <td th:text="@{
                                    ${room.status == '5' ?
                                        (room.remark ?: '预定') :
                                        room.remark
                                    }
                                }"></td>
                    </tr>
                    <tr th:if="${categoryData.oneBedroom.size() == 0}">
                        <td colspan="4" class="text-center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 3. 两房一厅 -->
        <div class="col-sm-3">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">两房一厅</h3>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>单元号</th>
                        <th>房间号</th>
                        <th>租金/月</th>
                        <th>房屋状况</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="room : ${categoryData.twoBedroom}"
                        th:class="${room.status == '5' ? 'reserved-row' : ''}">
                        <td th:text="${room.unit}"></td>
                        <td th:text="${room.roomNum}"></td>
                        <td th:text="${room.rent}"></td>
                        <td th:text="@{
                                    ${room.status == '5' ?
                                        (room.remark ?: '预定') :
                                        room.remark
                                    }
                                }"></td>
                    </tr>
                    <tr th:if="${categoryData.twoBedroom.size() == 0}">
                        <td colspan="4" class="text-center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 4. 维修 -->
        <div class="col-sm-3">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">维修</h3>
                </div>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>单元号</th>
                        <th>房间号</th>
                        <th>房屋状况</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="room : ${categoryData.maintenance}">
                        <td th:text="${room.unit}"></td>
                        <td th:text="${room.roomNum}"></td>
                        <!-- 维修房间无备注则空着 -->
                        <td th:text="${room.remark}"></td>
                    </tr>
                    <tr th:if="${categoryData.maintenance.size() == 0}">
                        <td colspan="3" class="text-center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
</body>
</html>